<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/loading0.css">
  <link rel="stylesheet" href="./css/loading1.css">
  <link rel="stylesheet" href="./css/loading2.css">
  <link rel="stylesheet" href="./css/loading3.css">
  <link rel="stylesheet" href="./css/loading4.css">
  <link rel="stylesheet" href="./css/loading5.css">

</head>

<body>
  <div class="title">鼠标悬浮到模块上，控制loading的暂停与继续</div>
  <div class="clear">
    <div class="sinBlock">
      <div class="demo demo1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo3">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo6">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo7">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo8">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo9">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo10">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo11">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo12">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo13">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo14">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo15">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo16">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo17">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo18">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo19">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo20">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo21">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo22">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo23">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo24">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo25">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo26">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo27">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo28">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo29">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo30">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo31">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo32">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo33">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo34">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo35">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo36">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo37">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo38">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo39">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo40">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo41">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo42">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo43">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo44">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo45">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo46">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo47">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo48">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo49">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo50">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo51">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo52">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo53">
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo54">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo55">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo56">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo57">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo58">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo59">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo60">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery-1.7.2.min.js"></script>
<script>
  $(document).ready(function () {
    $(".sinBlock").mouseenter(function () {
      $(this).find(".demo").addClass("active")
    })
    $(".sinBlock").mouseleave(function () {
      $(this).find(".demo").removeClass("active")
    })
  });
</script>

</html>